<template>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
        <template #header>
            <!-- 搜索与添加区域 -->
            <el-alert :title="machineIp" type="success" center :closable="false" />
        </template>

        <div id="ip-body">
            <div class="ip-item ip-item-left">
                <el-form label-width="100px">
                    <el-form-item label="溯源IP">
                        <el-input v-model="ip" type="text" autocomplete="off" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchFormOp">查询</el-button>
                        <el-button @click="resetFormOp">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="ip-item ip-item-right">
                <span>IP地址: {{ ipResult.query }}</span>
                <el-divider />
                <span>国家: {{ ipResult.country }}</span>
                <el-divider />
                <span>地区: {{ ipResult.regionName }}</span>

                <el-divider />
                <span>服务商: {{ ipResult.isp }}</span>
                <el-divider />
                <span>经度: {{ ipResult.lat }}</span>
                <el-divider />
                <span>纬度: {{ ipResult.lon }}</span>
                <el-divider />
                <span>时区: {{ ipResult.timezone }}</span>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive, ref } from 'vue';
import { IpSearchGo,GetPublicIpGo } from '../wailsjs/go/utool/App'
import { ElNotification } from 'element-plus';



// ----数据定义区域 START----
const machineIp = ref('本机公网IP:   ')
const ip = ref('')
const ipResult = ref({
    "query": "",
    "status": "",
    "continent": "",
    "continentCode": "",
    "country": "",
    "countryCode": "",
    "region": "",
    "regionName": "",
    "city": "",
    "district": "",
    "zip": "",
    "lat": 0,
    "lon": 0,
    "timezone": "i",
    "offset": 0,
    "currency": "0",
    "isp": "",
    "org": "",
    "as": "",
    "asname": "",
    "mobile": false,
    "proxy": false,
    "hosting": false
})


// ----数据定义区域 END----

onBeforeMount(() => {
    GetPublicIpGo().then(res => {
        if (res.code != 1) {
            machineIp.value = res.msg
            return
        }
        machineIp.value +=  res.data
    })
})

// ----方法定义区域 START----
const resetFormOp = () => {
    ip.value = ''
}
const searchFormOp = () => {
    IpSearchGo(ip.value).then(res => {
        if (res.code != 1) {
            ElNotification.error({
                title: res.msg
            })
            return
        }
        ipResult.value = res.data
    })
}

// ----方法定义区域 END----


</script>

<style scoped>
#ip-body {
    display: flex;
    justify-content: space-between;
}

#ip-body .ip-item {
    flex: 1;
}

#ip-body .ip-item-left {
    padding-right: 20px;
}

#ip-body .ip-item-right {
    padding-left: 20px;
}
</style>